<h2>{{ text_payment_info }}</h2>
<table class="table table-striped table-bordered">
  <tr>
    <td>{{ entry_capture_status }}:</td>
    <td id="capture-status">{% if complete %}
        {{ text_complete }}
      {% else %}
        {{ text_incomplete }}
      {% endif %}</td>
  </tr>
  <tr>
    <td>{{ entry_capture }}</td>
    <td id="complete-entry">{% if complete %}
        -
      {% else %}
        {{ entry_complete_capture }}
        <input type="checkbox" name="capture-complete" value="1"/>
        <br/>
        <input type="text" name="capture-amount" value="0.00"/>
        <a class="btn btn-primary" id="button-capture" onclick="capture()">{{ button_capture }}</a>
      {% endif %}</td>
  </tr>
  <tr>
    <td>{{ entry_void }}</td>
    <td id="reauthorise-entry">{% if complete %}
        -
      {% else %}
        <a class="btn btn-primary" id="button-void" onclick="doVoid()">{{ button_void }}</a>
      {% endif %}</td>
  </tr>
  <tr>
    <td>{{ entry_transactions }}</td>
    <td>
      <table id="transaction-table" class="table table-striped table-bordered">
        <thead>
          <tr>
            <td class="text-left">{{ column_transaction_id }}</td>
            <td class="text-left">{{ column_transaction_type }}</td>
            <td class="text-left">{{ column_amount }}</td>
            <td class="text-left">{{ column_time }}</td>
            <td class="text-left">{{ column_actions }}</td>
          </tr>
        </thead>
        <tbody>
          {% for transaction in transactions %}
            <tr>
              <td class="text-left">{{ transaction.transaction_reference }}</td>
              <td class="text-left">{{ transaction.transaction_type }}</td>
              <td class="text-left">{{ transaction.amount|number_format(2) }}</td>
              <td class="text-left">{{ transaction.time }}</td>
              <td class="text-left">{% for action in transaction.actions %}
                  [<a href="{{ action.href }}">{{ action.title }}</a>]
                {% endfor %}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </td>
  </tr>
</table>
<script type="text/javascript"><!--
function markAsComplete() {
	$('#complete-entry, #reauthorise-entry, #reauthorise-entry').html('-');
	$('#capture-status').html('{{ text_complete }}');
}

function doVoid() {
	if (confirm('{{ text_confirm_void }}')) {
		$.ajax({
			type: 'POST',
			dataType: 'json',
			data: {'order_id':{{ order_id }}},
			url: 'index.php?route=extension/payment/pp_payflow_iframe/void&user_token={{ user_token }}',
			beforeSend: function() {
				$('#button-void').after('<span class="btn btn-primary loading"><i class="fas fa-circle-notch fa-spin fa-lg"></i></span>');
				$('#button-void').hide();
			},
			success: function(data) {
				if (!data.error) {
					$('#capture-status').text('{{ text_complete }}');

					var html = '';
					html += '<tr>';
					html += ' <td class="left">' + data.success.transaction_reference + '</td>';
					html += ' <td class="left">' + data.success.transaction_type + '</td>';
					html += ' <td class="left">' + data.success.amount + '</td>';
					html += ' <td class="left">' + data.success.time + '</td>';
					html += ' <td class="left"></td>';
					html += '</tr>';
					$('#transaction-table tbody').append(html);

					markAsComplete();
				}

				if (data.error) {
					alert(data.error);
					$('#button-void').show();
				}

				$('.loading').remove();
			}
		});
	}
}

function capture() {
	var amount = $('input[name="capture-amount"]').val();
	var complete = 0;

	if ($('input[name="capture-complete"]').is(':checked')) {
		complete = 1;
	}

	$.ajax({
		type: 'POST',
		dataType: 'json',
		data: {'order_id':{{ order_id }}, 'amount': amount, 'complete': complete},
		url: 'index.php?route=extension/payment/pp_payflow_iframe/capture&user_token={{ user_token }}',

		beforeSend: function() {
			$('#button-capture').after('<span class="btn btn-primary loading"><i class="fas fa-circle-notch fa-spin fa-lg"></i></span>');
			$('#button-capture').hide();
		},

		success: function(data) {
			if (!data.error) {
				var html = '';
				html += '<tr>';
				html += ' <td class="left">' + data.success.transaction_reference + '</td>';
				html += ' <td class="left">' + data.success.transaction_type + '</td>';
				html += ' <td class="left">' + data.success.amount + '</td>';
				html += ' <td class="left">' + data.success.time + '</td>';
				html += ' <td class="left">';

				$.each(data.success.actions, function(index, value) {
					html += ' [<a href="' + value.href + '">' + value.title + '</a>] ';
				});

				html += '</td>';
				html += '</tr>';
				$('#transaction-table tbody').append(html);

				if (complete == 1) {
					markAsComplete();
				}
			}

			if (data.error) {
				alert(data.error);
			}

			$('#button-capture').show();
			$('.loading').remove();
		}
	});
}

//--></script>